<template>
<div class="=max">
<van-row>
  <van-col span="MINI.cn" class="span1">MINI.cn</van-col>
</van-row>
 <van-form @submit="onSubmit">
  <van-cell-group inset class="inp">
    <van-field
      v-model="username"
      class="inp1"
      name="手机号"
      placeholder="手机号"
      :rules="[{ required: true, message: '请填写手机号' }]"
    />
     <van-field
    v-model="sms"
    center
    clearable
    placeholder="验证码"
  >
    <template #button>
      <van-button size="small" type="primary" class="btn1">发送验证码</van-button>
    </template>
  </van-field>
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" @click="dj">
      提交
    </van-button>
  </div>
  <van-divider style="margin-top:20%">社交账号登录</van-divider>
  <div class="min">
    <img src="@/assets/qq.png" width="30" height="30"/>
    <img src="@/assets/weixin.png" width="30" height="30"/>
    <img src="@/assets/xinlangweibo.png" width="30" height="30"/>
  </div>
</van-form>
<span class="span2">BY MINI.LRT</span>
</div>

</template>
<script setup lang="ts">
   import router from '@/router';
import axios from 'axios';
import { ref } from 'vue';
    const username = ref('');
    let sms = ref('');
    const onSubmit = (values:any) => {
      console.log('submit', values);
      router.push('addinformation')
    };
    let dj=function(){
      console.log('12121');
      axios.get('https://console-mock.apipost.cn/app/mock/project/b0e8c554-8b0c-4a31-bfda-edfab429f639/app/mock/project/b0e8c554-8b0c-4a31-bfda-edfab429f639/login')
    .then((res: any)=>{
        console.log(res);
        
    })
    }
   
    

</script>
<style scoped>
    *{background-color:#4a403a; color: white;}
    .max{
      width: 100%;
      height: 100%;
      margin-top: 1%;
      background-color: #6c625c;
    }
    .span1{
        margin-top: 20%;
        margin-left: 7%;
        font-size: 24px;
        font-weight: bold;
    }
    .inp{
        width: 90%;
        margin: 10% auto;
        text-align: center;
        border-bottom: 1px solid white;
        background-color: #4a403a;
    }
    
    .van-button{
      background-color:#c1ab96 ;
      width: 100%;
      color: white;
    }
    .min{
      width: 50%;
      height: 30%;
      margin-left: 28%;
    }
    img{
      background-color: white;
      margin-left: 10%;
    }
    .span2{
      margin-left: 40%;
      margin-top: 20%;
      color: white;
    }
    .btn1{
      border: 0;
      background-color:#4a403a;
      color: white;
    }
</style>